<template>
  <section class="input-number">
    <el-input-number
      v-model="value"
      :placeholder="placeholder"
      :controls="controls"
      :controls-position="position"
      :min="min"
      :max="max"
      :step="step"
      :precision="precision"
      :disabled="disabled"
      @change="handleChange"
    ></el-input-number>
  </section>
</template>
<script>
import mixins from './../mixins'
export default {
  name: 'VInputNumber',
  props: {
    option: {
      type: Object,
      default: {
        value: '',
        placeholder: '',
        controls: true,
        position: '',
        min: 0,
        max: 100,
        step: 1,
        precision: 0,
        disabled: false
      }
    }
  },
  mixins: [mixins],
  computed: {
    controls () {
      return this.option.controls
    },
    position () {
      return this.option.position || ''
    },
    step () {
      return this.option.step || 1
    },
    precision () {
      return this.option.precision || 0
    }
  },
  methods: {
    getValue () {
      return this.value
    },

    setValue (k) {
      this.$set(this, 'value', k)
    },

    setCheck () {
      let { value, required, max, min } = this
      let error = false, errorMsg = ''
      if (value !== undefined && value !== null) {
        value = value + ''
      }
      if (required && !value) {
        error = true;
        errorMsg = '必填选项不能为空'
      }
      if (!error) {
        if (required || value) {
          if (!error) {
            if (value) {
              if (value > max) {
                error = true;
                errorMsg = `超过最大值${max}`
              } else if (value < min) {
                error = true
                errorMsg = `小于最小值${min}`
              } else {
                error = false
              }
            }
          }
        }
      }
      this.error_ = error
      this.error_message_ = errorMsg
      this.fieldCheck()
    },

    handleChange (e) {
      this.setCheck()
      this.dispatch_event('filed-value-change', e)
    }
  }
}
</script>
<style lang="scss" scoped>
.input-number {
  /deep/ {
    .el-input-number {
      width: 100%;
    }
  }
}
</style>